---
title: 'Preview'
pagination:
  data: design.components.previews
  size: 1
  addAllPagesToCollections: true
  alias: item
permalink: '{{ item.previewUrl }}/index.html'
pageScripts:
  - '/js/design-system.js'
---

<!DOCTYPE html>
<html lang="en">
  <head>
    {% include 'partials/head.njk' %}

    <style>
      /* Extra padding for theme toggle */
      body {
        padding: 1rem 1rem 5rem 1rem;
      }

      .theme-toggle {
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 1rem;
        z-index: 10;
        background: var(--color-mid-bg);
      }

      {{ item.data.extraSampleCSS }}
    </style>
  </head>
  <body>
    <div class="preview">
      {{ item.rendered | safe }}
    </div>
    <div class="theme-toggle">
      {% include "partials/standard-theme-toggle.njk" %}
    </div>
    <!-- Sets a specific state for windowed previews -->
    <script>
      const urlSearchParams = new URLSearchParams(window.location.search);
      const params = Object.fromEntries(urlSearchParams.entries());

      const state = params.state || '';

      document.documentElement.setAttribute('data-state', state);
    </script>
  </body>
</html>
